<style>
* {
  margin: 0;
  padding: 0;
}
#bg {
  width: 100%;
  height: 900px;
  background: url("bg.jpg");
  background-size: 100% 100%;
}

#main {
  width: 100%;
  height: 900px;
  /* background-color: #666; */
  /* opacity: 0.6; */
  background-color: rgba(0, 0, 0, 0.6);
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d9dde2;
}
#title {
  width: 100%;
  height: 400px;
  line-height: 500px;
  text-align: center;
  color: #fff;
  font-size: 130px;
  font-family: "华文琥珀";
}
.title_name {
  color: #fff;
  font-size: 40px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: "华文行楷";
}
.text {
  width: 800px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  margin: 100px auto;
  font-family: "黑体";
}
.btn_more {
  width: 100%;
  height: 30px;
}
.btn_more a {
  color: #fff;
  border: 3px solid #fff;
  padding: 20px 40px;
  border-radius: 40px;
  font-family: "幼圆";
  margin-left: 46%;
}
.btn_more a:hover {
  color: rgb(220, 225, 230);
  border: 3px solid rgb(220, 225, 230);
}
#label {
  animation: toSee 3s 1 linear alternate;
}
@keyframes toSee {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
<template>
  <div id="bg">
    <div id="main">
      <div style="width: 100%; height: 50px; background: rgba(0, 0, 0, 0.424)">
        <img
          src="https://www.gxust.edu.cn/images/logo.png"
          style="float: left"
          height="50"
        />
        <img
          src="https://www.gxust.edu.cn/images/header-pic.png"
          style="float: right; margin-right: 50px; margin-top: 10px"
          height="30"
        />
      </div>
      <div id="title">
        <p id="label">COVID-19</p>
      </div>
      <div class="title_name" id="label">
        <p>新冠肺炎病毒</p>
      </div>
      <div class="text" id="label">
        <p>
          新冠病毒自发现以来到现在，给世界各国造成巨大的灾难。截至{{
            madetime
          }}，全国累计确诊{{ this.all_Num }}，累计治愈{{
            this.all_Cure
          }}人，累计死亡{{ this.all_Dead }}人，现有确诊{{
            this.all_NowHave
          }}人。其中我国累计确诊{{ this.gntotal }}人，现有确诊{{
            this.nowHave
          }}人，累计治愈{{ this.curetotal }}人，累计死亡{{
            this.deathtotal
          }}人。
        </p>
      </div>
      <div class="btn_more" id="label">
        <a @click="seeMore">查看更多</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from "@/http/axios";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.gettime();
    this.findJson();
    setInterval(() => {
      this.gettime();
    }, 1000);
    this.id = setInterval(() => {
      this.findJson();
    }, 2000);
  },
  data() {
    return {
      time: "",
      gntotal: 0,
      curetotal: 0,
      deathtotal: 0,
      jwsrNum: 0,
      nowHave: 0,
      all_Num: 0,
      all_Dead: 0,
      all_NowHave: 0,
      all_Cure: 0,
      id: 0,
      madetime: 0,
    };
  },
  methods: {
    findJson() {
      axios
        .get("http://localhost:9528/test/news/wap/fymap2020_data.d.json")
        .then((res) => {
          console.log(res.data);
          this.time = res.data.cachetime;
          this.gntotal = res.data.gntotal;
          this.curetotal = res.data.curetotal;
          this.deathtotal = res.data.deathtotal;
          this.nowHave = res.data.econNum;
          this.jwsrNum = res.data.jwsrNum;
          this.all_Num = res.data.othertotal.certain;
          this.all_Dead = res.data.othertotal.die;
          this.all_NowHave = res.data.othertotal.ecertain;
          this.all_Cure = res.data.othertotal.recure;
        });
    },
    seeMore() {
      this.$router.push({
        path: "/dynamic/index",
      });
    },
    gettime() {
      var time = new Date();
      var arr = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var hour = time.getHours();
      var min = time.getMinutes();
      var sec = time.getSeconds();
      this.madetime =
        time.getFullYear() +
        "-0" +
        (time.getMonth() + 1) +
        "-0" +
        time.getDate() +
        " " +
        arr[time.getDay()] +
        "  " +
        hour +
        (min < 10 ? ":0" : ":") +
        min +
        (sec < 10 ? ":0" : ":") +
        sec +
        (hour < 12 ? " AM" : " PM");
    },
  },
};
</script>
